<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 什么是伪元素？--很像元素，但不是元素（element），是元素中的一些特殊位置 */
      /* 选中的是div的第一个字符 */
      div::first-letter {
        color: red;
        font-size: 20px;
      }
      /* 选中的是div的第一个行文字 */
      div::first-line {
        background-color: yellow;
      }

      /* 选中的是div中被鼠标选择的文字 */
      div::selection {
        background-color: pink;
        color: blue;
      }
      /* 选中的是input元素中的提示文字 */
      input::placeholder {
        color: red;
      }

      /* 选中的是p元素最开始的位置，随后创建一个子元素 */
      p::before {
        content: "￥";
      }
      /* 选中的是p元素最后面的位置，随后创建一个子元素 */
      p::after {
        content: "元";
      }

      /* 通配选择器*大于继承选择器p */
      * {
        color: red;
      }
      div {
        color: aqua;
      }
    </style>
  </head>
  <body>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
      quisquam amet aut repellendus, magni quae, beatae sunt laboriosam, odio
      temporibus consectetur ducimus atque maiores ipsum voluptatem eum qui.
      Voluptatibus eveniet autem perferendis! Exercitationem laboriosam beatae
      placeat in atque soluta reprehenderit itaque nam, perspiciatis asperiores
      odio voluptatibus ipsum, nobis facere est, officia iste repellat? Animi
      facere repellat quia quibusdam. Voluptates, sequi?
    </div>
    <input type="text" placeholder="请输入内容" />
    <p>199</p>
    <h2>元素选择器</h2>
    <p><span>继承</span></p>
  </body>
</html>
